@import (reference) "@/styles/variables.less";

.batch-process-page {
  .batch-process-page__header {
    .batch-process-page__title {
      font-size: @font-size-3xl;
  font-weight: 700;
  color: @gray-900;
    }

    .batch-process-page__subtitle {
      color: @gray-600;
  margin-top: @spacing-xs;
    }

    .batch-process-page__stats {
      display: flex;
  align-items: center;
  gap: @spacing-md;
    }
  }

  .batch-process-page__content {
    & > * + * {
    margin-top: @spacing-xl;
  }

    .batch-process-page__grid {
      display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-xl;
  
  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(3, 1fr);
  }
    }

    .batch-process-page__file-section {
      @media (min-width: @screen-lg) {
    grid-column: span 2;
  }
  
  & > * + * {
    margin-top: @spacing-lg;
  }
    }

    .batch-process-page__settings-section {
      & > * + * {
    margin-top: @spacing-lg;
  }
    }

    .batch-process-page__progress-section {
      & > * + * {
    margin-top: @spacing-lg;
  }

      .batch-process-page__progress-header {
        display: flex;
  align-items: center;
  justify-content: space-between;
      }

      .batch-process-page__progress-actions {
        display: flex;
  align-items: center;
  gap: @spacing-md;
      }
    }

    .batch-process-page__stats-section {
      display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @spacing-lg;
  
  @media (min-width: @screen-md) {
    grid-template-columns: repeat(4, 1fr);
  }
    }
  }

  // 状态卡片样式
  .batch-process-page__stat-card {
    .card();
  padding: @spacing-lg;
  text-align: center;
  transition: all @transition-normal;

    &:hover {
      transform: scale(1.05);
  box-shadow: @shadow-lg;
    }

    .batch-process-page__stat-value {
      font-size: @font-size-2xl;
  font-weight: 700;
    }

    .batch-process-page__stat-label {
      font-size: @font-size-sm;
  color: @gray-600;
    }
  }

  // 状态颜色变量
  .batch-process-page__stat-total {
    .batch-process-page__stat-value {
      color: @blue-600;
    }
  }

  .batch-process-page__stat-completed {
    .batch-process-page__stat-value {
      color: @green-600;
    }
  }

  .batch-process-page__stat-active {
    .batch-process-page__stat-value {
      color: @yellow-600;
    }
  }

  .batch-process-page__stat-failed {
    .batch-process-page__stat-value {
      color: @red-600;
    }
  }

  // 响应式设计
  @media (max-width: @screen-md) {
    .batch-process-page__content {
      .batch-process-page__grid {
        grid-template-columns: repeat(1, 1fr);
      }

      .batch-process-page__stats-section {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }

  @media (max-width: @screen-sm) {
    .batch-process-page__header {
      .batch-process-page__stats {
        display: flex;
  flex-direction: column;
  & > * + * {
    margin-top: @spacing-sm;
  }
      }
    }
  }
}